<template>
	<view style="height: 100%;">
		<view class="centent">
			<view class="navtitle">
				<view class="navcenter" @tap="totongxunlu">
					<view class="myziliao">
						<image src="../../static/tongxun.png" mode=""></image>
						<text>通讯录</text>
					</view>
					<view class="jump">
						<image src="../../static/jiantou.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="navtopbox">
				<view class="navtopboxcenter">
					<!-- <view class="" >
						<text>暂无消息</text>
					</view> -->
					<kongyemian v-if="hhList.length<1" :isLoding="loding" type="xiaoxi"></kongyemian>
					<view class="centerone" v-for="(item,index) in hhList" :key="index" v-if="hhList.length>0"
						@tap="toCovDetail(index)">
						<view class="imgbox">
							<image :src="item.userProfile.avatar" mode=""></image>
						</view>
						<view class="list">
							<view class="usershenfen">
								<text>{{item.userProfile.nick}}</text>
								<!-- <text>【数学老师】</text>							 -->
								<!-- <text class="bzr">班主任</text> -->
							</view>
							<view class="textboxone">
								<text class="textbox">{{item.lastMessage.payload.text}}</text>
							</view>
							<view class="shenfen">
								<text v-text="showTimePipe(item.lastMessage.lastTime*1000)"></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from 'vuex';

	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin,
				imid: state => state.user.imid
			})
		},

		data() {
			return {
				status: 0,
				showzhanwu: false,
				hhList: [],
				index: null,
				loding: false
			}
		},
		methods: {
			// 时间
			showTimePipe(unix_stamp) { // unix_stamp 精确到微秒
				var _today_obj = new Date(),
					_today_date = {
						y: _today_obj.getFullYear(),
						m: (_today_obj.getMonth() + 1 < 10 ? '0' + (_today_obj.getMonth() - -1) : (_today_obj.getMonth() -
							-1)),
						d: (_today_obj.getDate() < 10 ? '0' + _today_obj.getDate() : _today_obj.getDate())
					}

				var _today_stamp = Date.parse(_today_date.y + '/' + _today_date.m + '/' + _today_date.d + ' 00:00:00')

				var stamp = []
				stamp[0] = _today_stamp + 86400000
				stamp[1] = _today_stamp
				stamp[2] = _today_stamp - 86400000
				stamp[3] = _today_stamp - 172800000

				stamp[4] = _today_stamp - 518400000 // 7天

				stamp[5] = _today_stamp - 31536000000 // 365天

				var _compare_obj = new Date()
				_compare_obj.setTime(unix_stamp)

				var return_str

				if (unix_stamp >= stamp[1] && unix_stamp < stamp[0]) {
					return_str = _compare_obj.getHours() + ':' + (_compare_obj.getMinutes() < 10 ? '0' + _compare_obj
						.getMinutes() : _compare_obj.getMinutes())
				} else if (unix_stamp >= stamp[2] && unix_stamp < stamp[1]) {
					var yesterdayText = '昨天'
					return_str = yesterdayText + ' ' + _compare_obj.getHours() + ':' +
						(_compare_obj.getMinutes() < 10 ? '0' + _compare_obj.getMinutes() : _compare_obj.getMinutes())
				} else if (unix_stamp >= stamp[3] && unix_stamp < stamp[2]) {
					var theDayBeforeYesterdayText = '前天'
					return_str = theDayBeforeYesterdayText + ' ' + _compare_obj.getHours() + ':' +
						(_compare_obj.getMinutes() < 10 ? '0' + _compare_obj.getMinutes() : _compare_obj.getMinutes())

				} else if (unix_stamp >= stamp[4] && unix_stamp < stamp[3]) { // 7天内
					var daynames = ['天', '一', '二', '三', '四', '五', '六']
					var dathStr = '星期' + daynames[_compare_obj.getDay()]

					var SundayText = '星期天'
					var MondayText = '星期一'
					var TuesdayText = '星期二'
					var WednesdayText = '星期三'
					var ThursdayText = '星期四'
					var FridayText = '星期五'
					var SaturdayText = '星期六'

					var dathStr2

					switch (dathStr) {
						case '星期天':
							dathStr2 = SundayText
							break
						case '星期一':
							dathStr2 = MondayText
							break
						case '星期二':
							dathStr2 = TuesdayText
							break
						case '星期三':
							dathStr2 = WednesdayText
							break
						case '星期四':
							dathStr2 = ThursdayText
							break
						case '星期五':
							dathStr2 = FridayText
							break
						case '星期六':
							dathStr2 = SaturdayText
							break
						default:
							dathStr2 = dathStr
							break
					}

					return_str = dathStr2 + ' ' + _compare_obj.getHours() + ':' +
						(_compare_obj.getMinutes() < 10 ? '0' + _compare_obj.getMinutes() : _compare_obj.getMinutes())
				} else if (unix_stamp >= stamp[5] && unix_stamp < stamp[4]) { // 365天内
					var monthText = '月'
					var dayText = '日'
					return_str = (_compare_obj.getMonth() - (-1)) + monthText + _compare_obj.getDate() + dayText + ' ' +
						_compare_obj.getHours() + ':' + (_compare_obj.getMinutes() < 10 ? '0' + _compare_obj.getMinutes() :
							_compare_obj.getMinutes())

				} else {
					var yearText = '年'
					var monthText = '月'
					var dayText = '日'
					return_str = _compare_obj.getFullYear() + yearText + (_compare_obj.getMonth() - (-1)) +
						monthText + _compare_obj.getDate() + dayText + ' ' + _compare_obj.getHours() + ':' +
						(_compare_obj.getMinutes() < 10 ? '0' + _compare_obj.getMinutes() : _compare_obj.getMinutes())
				}
				return return_str
			},
			change(e) {
				this.status = parseInt(e);
			},
			totongxunlu() {
				if(uni.getStorageSync("def") == 2){
					uni.showToast({
						title: "教育局身份不支持该功能",
						icon: "none",
					})
				} else{
					uni.navigateTo({
						url: '../totongxunlu/totongxunlu'
					})
				}
				
			},
			toclassggxiangqing() {
				uni.navigateTo({
					url: '../tongzhixaingqing/tongzhixaingqing'
				})
			},
			// 跳转到消息
			toCovDetail(e) {
				// 上报已读
				this.$tim.setMessageRead({
					conversationID: this.hhList[e].conversationID
				});

				uni.navigateTo({
					url: "../conversationDt/conversationDt?cvid=" + this.hhList[e].conversationID + '&toImId=' +
						this.hhList[e].userProfile.userID
				})
			},
			getData() {
				this.loding = true
				this.$store.dispatch("timGetCovList").then(res => {					
						this.hhList = res
						console.log(this.hhList)
					    this.loding = false											
				})

			}
		},
		onLoad() {},
		onShow() {
			if (!this.isLogin) {
				if (uni.getStorageSync("token")) { //判断是否有token，然后调用自动登录的接口
					this.$store
						.dispatch('loginByWexin')
						.then(res => {
							this.code = res
							this.$store
								.dispatch('apiUserAutoLogin', {
									token: uni.getStorageSync("token")
								})
								.then(res => {
									if(uni.getStorageSync("def") == 2){
										uni.showToast({
											title: "教育局身份不支持该功能",
											icon: "none",
										})
									} else{
										this.$store.dispatch("timLogin", this.imid).then(res => {
											setTimeout(() => {
												this.getData()
											}, 1000)
										})
									}
									


								});
						});
				} else { //没有token，去登录页面点击登录				
					uni.navigateTo({
						url: '../login/login'
					})
				}

			} else {
				if( uni.getStorageSync("def") == 2){
					uni.showToast({
						title: "教育局身份不支持该功能",
						icon: "none",
					})
				} else{
					this.$store.dispatch("timLogin", this.imid).then(res => {
						setTimeout(() => {
							this.getData()
						}, 1000)
					})
				}
				

			}
		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getData();
				uni.stopPullDownRefresh();
			}, 1500)
		},

	}
</script>

<style lang="less">
	page {
		height: 100%;
		background-color: #f4f4f4;
		box-sizing: border-box;

	}

	.centent {
		background-image: url(../../static/keding.png);
		background-size: 100% auto;
		background-repeat: no-repeat;
		width: 100%;
		height: 100%;

		.navtitle {
			display: flex;
			align-items: flex-end;
			width: 100%;
			height: 150rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			.navcenter {
				width: 100%;
				height: 100%;
				background-color: #fff;
				border-radius: 15rpx;
				box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
				padding: 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;

				.myziliao {
					display: flex;
					align-items: center;

					image {
						width: 55rpx;
						height: 55rpx;
						margin-right: 25rpx;
						margin-left: 20rpx;
					}

					text {
						font-size: 30rpx;
						font-weight: bold;
					}
				}

				.jump {

					image {
						width: 27rpx;
						height: 45rpx;
					}
				}

			}


		}

		.navtopbox {
			width: 100%;
			height: calc(100vh - 150rpx);
			padding: 20rpx;
			box-sizing: border-box;

			.navtopboxcenter {
				position: relative;
				width: 100%;
				height: 100%;
				background-color: #fff;
				box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
				border-radius: 15rpx;
				overflow: hidden;

				.centerone {
					border-bottom: 2px solid #ccc;
					display: flex;
					justify-content: center;
					align-items: center;
					padding-left: 20rpx;

					.imgbox {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;
						background-color: #f9c387;

						image {
							width: 100rpx;
							height: 100rpx;
							border-radius: 50%;
						}
					}

					.list {
						position: relative;
						background-color: #fff;
						width: 100%;
						display: flex;
						flex-direction: column;
						font-size: 28rpx;
						color: #ccc;
						padding: 20rpx;
						box-sizing: border-box;

						.usershenfen {
							font-size: 35rpx;
							color: #000000;
							margin-bottom: 10rpx;

							.bzr {
								padding: 5rpx 20rpx;
								border-radius: 10rpx;
								background-color: #0a98f7;
								color: #fff;
								font-size: 25rpx;
								margin-left: 10rpx;
							}
						}

						.textboxone {
							.textbox {
								margin-right: 20rpx;
							}
						}

						.shenfen {
							padding: 8rpx 20rpx;
							border-radius: 38rpx;
							position: absolute;
							top: 18rpx;
							right: 20rpx;
							font-size: 28rpx;



						}
					}
				}




			}
		}


	}
</style>
